<template>
  <div class="flex flex-row">
    <!-- 侧边栏 -->
    <aside class="app-drag w-14 h-screen bg-black bg-opacity-80 flex flex-col items-center py-4">
      <!-- 用户头像。 -->
      <div class="w-10 h-10 bg-gray-100 flex justify-center items-center rounded border mt-8">
        <i class="el-icon-user text-gray-500 text-xl"></i>
      </div>

      <!-- 导航菜单。 -->
      <nav class="flex flex-col">
        <router-link class="app-no-drag mt-4 text-lg transition"
                     v-for="(item, index) in navMenuData" v-bind:key="index" v-bind:to="item.route || ''"
                     v-bind:class="resolveNavItemClass(item)">
          <i v-bind:class="item.icon"></i>
        </router-link>
      </nav>

      <!-- 底部菜单。 -->
      <nav class="flex flex-col mt-auto">
        <router-link class="app-no-drag mt-4 text-lg transition"
                     v-for="(item, index) in navFootData" v-bind:key="index" v-bind:to="item.route || ''"
                     v-bind:class="resolveNavItemClass(item)">
          <i v-bind:class="item.icon"></i>
        </router-link>
      </nav>
    </aside>

    <router-view class="flex-1"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 菜单导航。
      navMenuData: [
        {icon: "el-icon-chat-round", route: "/home/chat"},
        {icon: "el-icon-user", route: "/home/contact"},
        {icon: "el-icon-folder", route: "/home/collect"},
        {icon: "el-icon-box", route: ""},
        {icon: "el-icon-orange", route: ""},
        {icon: "el-icon-connection", route: ""},
      ],
      // 底部导航。
      navFootData: [
        {icon: "el-icon-cherry", route: ""},
        {icon: "el-icon-mobile-phone", route: ""},
        {icon: "el-icon-setting", route: ""},
      ],
    }
  },
  methods: {
    // 解析：导航元素，样式。
    resolveNavItemClass(item) {
      const {route} = item;
      if (route && this.$route.path.startsWith(route)) {
        return "text-green-400 hover:text-green-400";
      } else {
        return "text-gray-400 hover:text-gray-200";
      }
    }
  }
};
</script>